<template>
  <div class="cont1200 electic">
    <div class="imgtitle bj-center"></div>
    <div class="boxelel">
      <mytitleBoxClean :msg="{ f: 'c', w: 2,t:'精品好货'}">
        <!-- <span class="pointer">更多</span> -->
      </mytitleBoxClean>
      <br />
      <div class="bt1 clear">
        <ul class="flex">
          <li v-for="i in 4" :key="i.id">
            <imgBox
              :msg="{
              src:' https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/gallery/2019/03/04/15516790446240.jpg',
            url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=250&h=250&f=webp&q=90',
            w:'100%',
            c:'t',
            }"
            ></imgBox>
          </li>
        </ul>
      </div>
    </div>

    <div class="boxelel">
      <mytitleBoxClean :msg="{ f: 'l', w: 2,t:'精品好货'}">
        <span class="pointer">更多</span>
      </mytitleBoxClean>
      <br />
      <div class="bt2 clear">
        <div class="l f-l">
          <imgBox
            :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/4/images/2018/08/22/15349168217893.jpg',
            url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=250&h=250&f=webp&q=90',
            w:'100%',
            c:1,
            }"
          ></imgBox>
        </div>

        <div class="r f-l">
          <ul class="flex">
            <li v-for="i in 4" :key="i.id">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/223/gallery/2018/07/11/15312932889502.jpg?x-oss-process=image/resize,m_pad,limit_0,h_220,w_220',
  
            c:'t',
            w:'100%',
            imgw:'80%',
            h:'300px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            ,
               t1:'尊尚 Z3时尚版',
            t2:' 折叠电动自行车 两轮电动车（48V7.5A/10A)',
            t3:'90',
            t4:'100',
            }"
              ></imgBox>
            </li>

            <li v-for="i in 4" :key="i.id">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/223/gallery/2018/07/11/15312932889502.jpg?x-oss-process=image/resize,m_pad,limit_0,h_220,w_220',
            c:'t',
            h:'100%',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
          
            }"
              ></imgBox>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="boxelel">
      <mytitleBoxClean :msg="{ f: 'l', w: 2,t:'精品好货'}">
        <span class="pointer">更多</span>
      </mytitleBoxClean>
      <br />
      <div class="bt2 clear">
        <div class="l f-l">
          <imgBox
            :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/4/images/2018/08/22/15349168217893.jpg',
            url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=250&h=250&f=webp&q=90',
            w:'100%',
            c:1,
            }"
          ></imgBox>
        </div>

        <div class="r f-l">
          <ul class="flex">
            <li v-for="i in 8" :key="i.id">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/4/images/2018/08/22/15349175637589.jpg',
  
            c:'t',
            w:'100%',
            h:'300px',
            url:'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef6b4e9b9151849b3b1fb1dbf069c6ed.jpg?thumb=1&w=250&h=250&f=webp&q=90'
            }"
              ></imgBox>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="boxelel">
      <mytitleBoxClean :msg="{ f: 'l', w: 2,t:'精品好货'}">
        <span class="pointer">更多</span>
      </mytitleBoxClean>
      <br />
      <div class="bt3 clear">
        <div class="t flex-c">
          <div class="l">
            <imgBox
              :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg',
            c:1,
            h:'100%',
            imgh:'300px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
            ></imgBox>
          </div>
          <div class="r flex-c">
            <div v-for="i in 4" :key="i">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/298/images/2018/08/03/15332877072789.jpg',
            c:1,
            w:'100%',
            h:'100%',
            imgh:'150px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
              ></imgBox>
            </div>
          </div>
        </div>
        <div class="t flex-c">
          <div class="r flex-c">
            <div v-for="i in 4" :key="i">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/298/images/2018/08/03/15332877072789.jpg',
            c:1,
            w:'100%',
            h:'100%',
            imgh:'150px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
              ></imgBox>
            </div>
          </div>
          <div class="l">
            <imgBox
              :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516834479575.jpg',
            c:1,
            h:'100%',
            imgh:'300px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
            ></imgBox>
          </div>
        </div>
      </div>
    </div>
    <div class="boxelel">
      <mytitleBoxClean :msg="{ f: 'l', w: 2,t:'精品好货'}">
        <!-- <span class="pointer">更多</span> -->
      </mytitleBoxClean>
      <br />
      <div class="bt3 clear">
        <div class="t flex-c">
          <div class="l">
            <imgBox
              :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg',
            c:1,
            h:'100%',
            imgh:'300px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
            ></imgBox>
          </div>
          <div class="r flex-c">
            <div v-for="i in 4" :key="i">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/298/images/2018/08/03/15332877072789.jpg',
            c:1,
            w:'100%',
            h:'100%',
            imgh:'150px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
              ></imgBox>
            </div>
          </div>
        </div>
        <div class="t flex-c">
          <div class="r flex-c">
            <div v-for="i in 4" :key="i">
              <imgBox
                :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/298/images/2018/08/03/15332877072789.jpg',
            c:1,
            w:'100%',
            h:'100%',
            imgh:'150px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
              ></imgBox>
            </div>
          </div>
          <div class="l">
            <imgBox
              :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516834479575.jpg',
            c:1,
            h:'100%',
            imgh:'300px',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
            ></imgBox>
          </div>
        </div>
        <!-- <div class="b">
          <div class="l f-r"></div>
          <div class="r f-r">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>-->
      </div>
    </div>

    <img
      class="boxelel"
      src="https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/4/images/2018/08/22/15349213116165.jpg"
      alt
    />

    <div class="boxelel flex bt4">
      <div class="item flex-c">
        <mytitleBoxClean :msg="{ f: 'l', w: 0,t:'学生',color:'rgb(151, 139, 248)'}">
          <!-- <span class="pointer">更多</span> -->
        </mytitleBoxClean>

        <div class="items" v-for="i in 9" :key="i">
          <imgBox
            :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/gallery/2018/08/22/15349069799776.jpg',
            c:'r',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
          ></imgBox>
        </div>
      </div>
      <div class="item flex-c">
        <mytitleBoxClean :msg="{ f: 'l', w: 0,t:'上班',color:'rgb(128, 255, 48)'}">
          <!-- <span class="pointer">更多</span> -->
        </mytitleBoxClean>
        <div class="items" v-for="i in 9" :key="i">
          <imgBox
            :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/gallery/2018/08/22/15349073547220.jpg',
            c:'l',
            h:'130px',

            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
          ></imgBox>
        </div>
      </div>
      <div class="item flex-c">
        <mytitleBoxClean :msg="{ f: 'l', t:'其他',color:'rgb(255, 182, 48)'}">
          <!-- <span class="pointer">更多</span> -->
        </mytitleBoxClean>
        <div class="items" v-for="i in 9" :key="i">
          <imgBox
            :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/gallery/2018/08/22/15349069917394.jpg',
            c:'r',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
          ></imgBox>
        </div>
      </div>
      <div class="item flex-c">
        <mytitleBoxClean :msg="{ f: 'l', w: 0,t:'学生',color:'rgb(14, 202, 302)'}">
          <!-- <span class="pointer">更多</span> -->
        </mytitleBoxClean>
        <div class="items" v-for="i in 9" :key="i">
          <imgBox
            :msg="{
              src:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/gallery/2018/08/22/15349069693756.jpg',
            c:'l',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
          ></imgBox>
        </div>
      </div>
    </div>

    <div class="boxelel btT flex">
      <mytitleBoxClean :msg="{ f: 'l', t:'讨论'}"></mytitleBoxClean>
      <div class="item" v-for="i in 4" :key="i">
        <div class="l">
          <imgBox
            :msg="{
              src:'http://img2.newmotor.com.cn/UploadFiles/2019-08/234/d20190819100119.jpg',
            c:1,
            w:'100%',
            url:'https://qjsc.oss-cn-beijing.aliyuncs.com/images/backend/8/images/2019/03/04/15516922481860.jpg'
            }"
          ></imgBox>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import mytitleBoxClean from "@/components/titleBox/titleBoxClean";
import imgBox from "@/components/imgBox/imgBox";

export default {
  data() {
    return {};
  },
  methods: {},
  components: {
    mytitleBoxClean,
    imgBox
  }
};
</script>
<style lang="scss" type="text/css" scoped>
@import "../../common/style.scss";
.boxelel {
  padding: 20px;
  width: 100%;
  // background-color: rgb(14, 202, 202);
  // height: 300px;
  .bt2 {
    $btH: 600px;
    width: 100%;
    height: $btH;
    .l {
      width: 233px;
      height: 100%;
    }
    .r {
      width: 1200 - 233px;
      ul {
        justify-content: space-around;
        li {
          width: 24%;
          height: ($btH / 2) - 4px;
          margin-bottom: 4px;
          background-color: $main-color;
        }
      }
    }
  }

  .bt1 {
    ul {
      li {
        width: 250px;
        // height: 200px;
        background-color: #245258;
      }
    }
  }
  .bt3 {
    height: 600px;
    $backcolor: #5bb2fa21;
    .t,
    .b {
      height: 300px;
      width: 100%;
      background-color: $backcolor;
      overflow: hidden;
    }
    .t {
      // justify-content: space-around;
      .l,
      .r {
        width: 50%;
        height: 300px;
        background-color: $backcolor;
      }
      .r {
        width: 50%;
        div {
          width: 49.5%;
          height: 49%;
          background-color: $backcolor;
        }
      }
    }
  }
  .b .imgulli {
    li {
      padding: 5px;
    }
  }
}
.btT {
  .item {
    width: 20%;
    // height: 200px;
    background-color: rgba(43, 170, 75, 0.719);
  }
}
.bt4 {
  height: 880px;
  .item {
    width: 50%;
    height: 50%;
    // background-color: rgba(44, 248, 255, 0.432);
    .items {
      width: (100% / 3);
      height: 130px;
      // background-color: rgba(0, 0, 0, 0.2);
    }
  }
}

.imgtitle {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: url("https://qjsc.oss-cn-beijing.aliyuncs.com/images/shop/218/images/2018/02/08/15180715764424.jpg");

  background-color: rgba(253, 227, 110, 0.2);
  img {
    width: 100%;
  }
}
</style>
